<template>
  <div :class="['z-container flex flex-col relative',{
    'z-container--nopadding':noPadding,
    'z-container--noborder':noBorder,
    'z-container--full h-full w-full':full,
  }]">
    <slot></slot>
  </div>
</template>

<script>
export default {
  name: 'ZContainer',
  props: {
    noPadding: Boolean,
    noBorder: Boolean,
    full: {
      type: Boolean,
      default: true
    }
  }
}
</script>

<style lang="scss" scoped>
.z-container {
  border: 1px solid #ebeef5;
  background-color: #fff;
  color: #303133;
  border-radius: 4px;
  overflow: hidden;
  padding: 20px;
  &--noborder {
    border: none;
  }
  &--nopadding {
    padding: 0;
  }
}
</style>
